<template>
	<div class="permission-role">
		<!--上面的东西-->
		<bread-crumb divider><template slot="title">角色管理</template></bread-crumb>
		<div>
			<el-button type="success" size="small" @click="visibleDialog=true">添加角色</el-button>
		</div>
		<!--角色列表-->
		<el-table :data="dataList" size="" v-loading="loading"  border style="width:100%">
			<el-table-column prop="id" label="id" width="70"></el-table-column>
			<el-table-column prop="title" label="角色名称" width=""></el-table-column>

			<el-table-column label="操作" fixed="right" width="170">
				<template slot-scope="scope">
					<el-button type="danger" size="small" @click="actShowUserRole(scope.row)">权限管理</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!--创建角色层-->
		<el-dialog title="创建角色" :visible.sync="visibleDialog" width="30%" >
			<div class="global-input-content">
				<div class="forms">
					<div class="row">
						<div class="title">角色名称</div>
						<input class="input main-input" type="text" v-model="submitData.title" maxlength="15" />
					</div>

				</div>

				<div class="btn-group mt10">
					<el-button  type="success" @click="actSubmit">提交</el-button>
				</div>
			</div>
		</el-dialog>
		<!--权限管理窗口-->
		<el-dialog title="权限编辑" :visible.sync="visibleDialogRole" width="800px" >
			<div class="global-input-content">
				<div class="row role-list">
					<div class="checkbox-row" v-for="item in menu">
						<div class="title">
							<div>{{item.title}}</div>
							<div>
								<!--<a style="color:blue"  @click="actSelectAllMenu(item.id)">[全选]</a>-->
								<!--<a style="color:red" @click="actclearAllMenu(item.id)">[清除]</a>-->
								<el-button size="mini" type="primary" @click="actSelectAllMenu(item.id)">全选</el-button>
								<el-button size="mini" type="danger" @click="actclearAllMenu(item.id)">清除</el-button>
							</div>
						</div>
						<el-checkbox-group v-model="checkedIdArray" @change="">
							<el-checkbox v-for="menu in item.children" :label="menu.id" :key="menu.id">{{menu.title}}</el-checkbox>
						</el-checkbox-group>
					</div>
				</div>
				<div class="btn-group mt10">
					<el-button  type="success" @click="actRoleEditSubmit">提交</el-button>
				</div>
			</div>
		</el-dialog>
		<!--<div style="color:red">{{menu}}</div>-->
		<!--<div style="color: blue">{{menuRole}}</div>-->
	</div>
</template>

<script>
import breadCrumb from '@/views/components/breadCrumb';
import { mixinUtils } from '@/mixins/mixins.utils';
import {
	apiMenuList,
	apiNodeApplyHandle,
	apiRoleAdd,
	apiRoleList,
	apiRoleMenuList,
	apiRoleMenuUpdate,
} from '@/axios/api.system';
import { mapState } from 'vuex';
export default {
	name: 'permission-role',
	mixins: [mixinUtils],
	components: {breadCrumb},
	data:function(){
		return {
			visibleDialog:false,//角色创建层
			visibleDialogRole:false,//角色权限编辑 层
			//原始值
			pagerCount: 5,//饿了么垃圾分页的页块显示
			page      : 1,
			pageSize  : 10,
			totalCount: 0,//总记录数
			//复杂值
			dataList: [],
			submitData:{
				title:'',
			},

			//有权限菜单相关
			menu: [], //本页自己加载的菜单，不使用全局的
			curEditingRole:{},//当前正在编辑的role对象
			checkedIdArray:[],//选中的id, 当前角色的菜单id，也要塞入这里
			menuRole:[],//当前角色的菜单，全部字段的
		}
	},
	computed:{
		...mapState(['loading']),
	},
	created() {
		this.getDataList()
		this.getMenuList()
	},
	methods:{
		//获取默认数据
		getDataList(){
			apiRoleList({
				pageSize    : this.pageSize,
				page     : this.page,
			}).then((res) => {
				this.totalCount = res.count
				if (res.data.length > 0) {
					this.dataList = res.data
				} else {
					this.dataList = []
				}
			})
		},

		//获取菜单
		getMenuList() {
			apiMenuList().then(res => {
				this.menu = res.data
			}).catch(err => {
				console.log(err)
			})
		},


		//提交
		actSubmit(){
			this.visibleDialog = false
			//限制
			if(this.submitData.title.trim() == ''){
				this.$message.error('角色名称为空')
				return false
			}
			//执行
			this.confirm('确定要这么干吗？',()=> {
				apiRoleAdd(this.submitData).then((res)=>{
					if(res.resultFlag){
						this.notify('操作成功')
						this.getDataList()
						this.submitData.title = ''//清空
					}else{
						this.$message({type:'warning',message:res.resultMsg})
					}
				})
			})
		},

		//显示角色权限编辑层
		actShowUserRole(row) {
			this.checkedIdArray = []//清空上次选择的
			this.curEditingRole = row //赋值正在编辑的role对象
			//加载这个角色的权限(菜单列表)
			apiRoleMenuList({
				roleId:row.id
			}).then((res)=>{
			    this.menuRole = res.data
				let _a =  res.data.reduce((ret,prev)=> {
					ret.push(prev.pmId)
					return ret
				},[])
				this.checkedIdArray = _a
				this.visibleDialogRole = true;
			})
		},


		//提交权限编辑
		actRoleEditSubmit(){
			//不一定要限制，因为可能允许角色没有菜单可用
			// if(this.checkedIdArray.length == 0 ){
			// 	this.$message.error("你没有选择权限")
			// }else{
			// }
			//把完整菜单的children提出来，弄成一级数据
			let _menuFlat = this.menu.reduce((ret,prev)=> {
				return [...ret,...prev.children]
			},[])
			console.log('一级菜单',_menuFlat)
			//拼接权限标题+id字符串
			let _roleString = this.checkedIdArray.reduce((ret,prev)=> {
				let _id = prev
				let _title = _menuFlat.find((item)=> {
					return item.id == _id
				}).title
				// let _title = "权限"
				ret = ret + _id + ',' + _title + '|'
				return ret
			},'').slice(0,-1)
			//提交
			apiRoleMenuUpdate({
				roleId :this.curEditingRole.id,
				roleString : _roleString
			}).then((res)=>{
				this.$message({type:"success",message:res.resultMsg})
				this.visibleDialogRole = false
			})
		},

		/////////////////////////////////////////////其它////////////////////////////////////////////////
		/////////////////////////////////////////////其它////////////////////////////////////////////////
		/////////////////////////////////////////////其它////////////////////////////////////////////////
		//全选
		actSelectAllMenu(id){
			let menuChildrenIdArray = this.getMenuChildrenIdArray(id)
			let _temp = menuChildrenIdArray.reduce((ret,prev)=> {
			    if(!this.checkedIdArray.includes[prev]){
			    	ret.push(prev)
			    }
			    return ret
			},[...this.checkedIdArray])
			this.checkedIdArray = _temp;
		},
		//清除
		actclearAllMenu(id){
			let menuChildrenIdArray = this.getMenuChildrenIdArray(id)
			this.checkedIdArray = [...this.checkedIdArray].filter((item)=> {
				return menuChildrenIdArray.includes(item) == false
			})

		},

		getMenuChildrenIdArray(id) {
			return this.menu
				.find((item) => item.id == id)
				.children
				.reduce((ret,prev)=> {
					ret.push(prev.id)
					return ret
				},[])
		},



		handleSizeChange (val) {
			console.log('改变每页数',val)
			this.page = 1 //恢复第一页
			this.pageSize = val
			this.getDataList()
		},
		handleCurrentChange (val) {
			console.log('改变当前页',val)
			this.page = val
			this.getDataList()
		},
	}

}
</script>

<style lang="less" scoped>
@import '~@/assets/global.less';
	.role-list{
		height:60vh!important;overflow-y: scroll;
		//border:1px solid #666;
		background-color: #f9f9f9;
		padding:10px;
		box-shadow: inset 2px 2px 2px #ddd;
		.checkbox-row{
			padding:10px 0px;
			border-bottom:1px solid #ddd;
			.title{font-weight: bold;.flex-jcsb()}
		}
	}
</style>
